<template>
  <div>
    <!-- 商品信息 -->
    <h4 class="title_text">商品信息</h4>
    <el-table class="table_list" style="width: 100%" :data="[codedetail]" :border="true">
      <!-- 商品名称 -->
      <el-table-column prop="goodsName" label="商品名称" width="180" />

      <!-- 商品型号 -->
      <el-table-column prop="model" label="商品型号" width="180" />

      <!-- 商品品牌 -->
      <el-table-column prop="brand" label="商品品牌" width="180" />

      <!-- 商品规格 -->
      <el-table-column prop="goodsSpecName" label="商品规格" width="180" />

      <!-- 质保开始时间 -->
      <el-table-column prop="warrantyStartTime" label="质保开始时间" width="180" />

      <!-- 质保到期时间 -->
      <el-table-column prop="warrantyEndTime" label="质保到期时间" width="180" />
    </el-table>

    <!-- 当前所属 -->
    <h4 class="title_text">当前所属</h4>
    <el-table class="table_list" style="width: 100%" :data="[codedetail]" :border="true">
      <!-- 客户名称 -->
      <el-table-column prop="username" label="客户名称" width="180" />

      <!-- 联系手机 -->
      <el-table-column prop="phone" label="联系手机" width="180" />

      <!-- 等级地址 -->
      <el-table-column label="登记地址">
        <template v-slot="scope">
          <div style="white-space: nowrap">
            {{ scope.row.province }} {{ scope.row.city }} {{ scope.row.area }}
            {{ scope.row.city }}&nbsp;{{ scope.row.address }}
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 变更所属人 -->
    <h4 class="title_text">变更所属人</h4>
    <el-table style="width: 100%" :border="true" :data="[dataForm]">
      <!-- 客户信息 -->
      <el-table-column prop="date" width="220">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>客户信息</span>
        </template>

        <el-select
          v-model="value4"
          placeholder="请选择关联客户"
          filterable
          clearable
          @change="changeSel"
          remote-show-suffix
          :filter-method="remoteMethod"
          :loading="loading2"
        >
          <el-option
            v-for="item in relevanceUser"
            :key="item.name"
            :disabled="item.name == codedetail.username && item.phone == codedetail.phone"
            :value="item.id"
            :label="item.name + ' ' + item.phone"
            @click="getinformation(item)"
          />
        </el-select>
      </el-table-column>

      <!-- 联系手机 -->
      <el-table-column prop="phone" width="180">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>联系手机</span>
        </template>
        <template v-slot="item">
          <el-input v-model="item.row.phone" />
        </template>
      </el-table-column>

      <!-- 登记地址 -->
      <el-table-column prop="add" width="280">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>登记地址</span>
        </template>
        <template v-slot="item">
          <SingleAddress
            @value-change="handleAddressUpdate"
            ref="addrsDom"
            :address="item.row.adds || { province: '' }"
          />
        </template>
      </el-table-column>

      <!-- 详细地址 -->
      <el-table-column prop="address" width="240">
        <template #header>
          <i class="fa fa-asterisk" aria-hidden="true"></i>
          <span>详细地址</span>
        </template>
        <template v-slot="item">
          <el-input v-model="item.row.address" />
        </template>
      </el-table-column>

      <!-- 备注 -->
      <el-table-column prop="remark" label="备注" width="240">
        <template v-slot="item">
          <el-input v-model="item.row.remark" clearable />
        </template>
      </el-table-column>
    </el-table>
    <div class="dialog-footer" style="display: flex; justify-content: flex-end; gap: 10px">
      <HButton is-modal type="primary" @click="onConfirm">确定</HButton>
      <HButton is-modal @click="onCancel">取消</HButton>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted, reactive, toRefs, getCurrentInstance } from 'vue'
  import { userChangeList, saveChangeCodeUser, selecUser } from '@/api/code'
  import { useRoute } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import SingleAddress from '@/components/address/singleAddress.vue'
  import _ from 'lodash'
  import HButton from '@/components/common/button/HButton.vue'

  const props = defineProps({
    //子组件接收父组件传递过来的值
    codedetail: Object,
  })
  const dataPage = {
    limit: 0,
    name: '',
    page: 0,
  }
  const route = useRoute()
  const emit = defineEmits(['close-popup', 'updata-getDetail'])
  const relevanceUser = ref()
  const loading2 = ref(true)
  const value4 = ref('')
  const addrsDom = ref()
  const { codedetail } = toRefs(props)
  const dataForm = reactive({
    address: '',
    area: '',
    city: '',
    id: codedetail.value.id,
    name: '',
    phone: '',
    province: '',
    remark: '',
    town: '',
    userId: 0,
    adds: null,
  })

  // 地址更新事件
  const handleAddressUpdate = () => {
    if (addrsDom.value) {
      const address = addrsDom.value.getSelectAddr()
      Object.assign(dataForm, { ...address })
    }
  }

  // 确定事件
  const onConfirm = () => {
    const data = { ...dataForm }
    delete data.adds
    saveChangeCodeUser(data).then((res) => {
      if (res.data.code == 20000) {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 4500,
        })
        emit('close-popup', false)
        emit('updata-getDetail')
      } else {
        if (res.data.isError)
          ElMessage({
            message: res.data.message,
            type: 'error',
            duration: 4500,
          })
      }
    })
  }
  const onCancel = () => {
    emit('close-popup', false)
  }

  const changeSel = (val) => {
    if (!val) {
      dataForm.userId = null
      dataForm.address = ''
      dataForm.area = ''
      dataForm.city = ''
      dataForm.name = ''
      dataForm.phone = ''
      dataForm.province = ''
      dataForm.town = ''
      dataForm.adds = null
      addrsDom.value.clearSelectAddr()
    }
  }
  const getinformation = (val) => {
    dataForm.userId = val.id
    dataForm.address = val.address
    dataForm.area = val.area
    dataForm.city = val.city
    dataForm.name = val.name
    dataForm.phone = val.phone
    dataForm.province = val.province
    dataForm.town = val.town
    dataForm.adds = null
    addrsDom.value.clearSelectAddr()
    dataForm.adds = {
      province: val.province,
      area: val.area,
      city: val.city,
      town: val.town,
    }
  }

  onMounted(() => {
    let data = {
      limit: 0,
      page: 0,
    }
    selecUser(dataPage).then((res) => {
      relevanceUser.value = res.data.data.rows
      loading2.value = false
    })
    userChangeList(data, route.params.id)
  })
  const remoteMethod = _.throttle((val: string) => {
    if (dataPage.name !== val) {
      dataPage.name = val
      loading2.value = true
      selecUser(dataPage).then((res) => {
        relevanceUser.value = res.data.data.rows
        loading2.value = false
      })
    }
  }, 500)

  const destory = () => {
    const instance = getCurrentInstance()
  }

  defineExpose({
    destory,
  })
</script>
<style lang="scss" scoped>
  @import './index';
</style>
